<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        /* 通用样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f3f4f6;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 20px;
        }

        /* 注册容器 */
        .container {
            background: #fff;
            padding: 30px 40px;
            border-radius: 10px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            width: 100%;
        }

        form {
            display: flex;
            flex-direction: column;
        }

        label {
            font-size: 14px;
            color: #555;
            margin-bottom: 5px;
        }

        input[type="text"], input[type="password"], input[type="email"] {
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            margin-bottom: 20px;
        }

        input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
            outline: none;
            border-color: #5b9bd5;
            box-shadow: 0 0 5px rgba(91, 155, 213, 0.5);
        }

        button {
            padding: 12px 15px;
            background-color: #5b9bd5;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #3a78b7;
        }

        .captcha-container {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        .captcha-container canvas {
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .captcha-container canvas:hover {
            transform: scale(1.05);
        }

        .captcha-hint {
            font-size: 12px;
            color: #999;
            text-align: left;
        }

        .login-link {
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
        }

        .login-link a {
            color: #5b9bd5;
            text-decoration: none;
            font-weight: bold;
        }

        .login-link a:hover {
            text-decoration: underline;
        }
    </style>
    <script>
        // 全局变量存储生成的验证码
        let generatedCaptcha = "";

        // 随机生成验证码
        function generateCaptcha() {
            const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            let captcha = "";
            for (let i = 0; i < 5; i++) {
                captcha += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            generatedCaptcha = captcha; // 存储生成的验证码
            drawCaptcha(captcha); // 绘制到 canvas
        }

        // 绘制验证码到 <canvas>
        function drawCaptcha(captcha) {
            const canvas = document.getElementById("captchaCanvas");
            const ctx = canvas.getContext("2d");

            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 设置背景颜色
            ctx.fillStyle = "#f2f2f2";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // 绘制验证码字符串
            ctx.font = "20px Arial";
            ctx.fillStyle = "#333";
            ctx.fillText(captcha, 15, 25);

            // 添加干扰线
            for (let i = 0; i < 5; i++) {
                ctx.strokeStyle = getRandomColor();
                ctx.beginPath();
                ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
                ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
                ctx.stroke();
            }

            // 添加噪点
            for (let i = 0; i < 30; i++) {
                ctx.fillStyle = getRandomColor();
                ctx.beginPath();
                ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, 1, 0, 2 * Math.PI);
                ctx.fill();
            }
        }

        // 获取随机颜色
        function getRandomColor() {
            const r = Math.floor(Math.random() * 256);
            const g = Math.floor(Math.random() * 256);
            const b = Math.floor(Math.random() * 256);
            return `rgb(${r},${g},${b})`;
        }

        // 验证验证码输入
        function validateCaptcha(event) {
            const captchaInput = document.getElementById("captcha").value;
            if (captchaInput !== generatedCaptcha) {
                event.preventDefault();
                alert("验证码不正确，请重新输入！");
            }
        }

        // 页面加载时生成初始验证码
        window.onload = () => {
            generateCaptcha();
            document.getElementById("captchaCanvas").addEventListener("click", generateCaptcha);

            // 在表单提交时验证验证码
            document.querySelector("form").addEventListener("submit", validateCaptcha);
        };
    </script>
</head>
<body>
<div class="container">
    <h1>注册</h1>
    <form action="/register" method="post">
        <label for="id">账号:</label>
        <input type="text" id="id" name="id" required>

        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required>

        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>

        <div class="captcha-container">
            <canvas id="captchaCanvas" width="150" height="40" title="点击刷新验证码"></canvas>
            <input type="text" id="captcha" name="captcha" placeholder="请输入验证码" required>
        </div>
        <p class="captcha-hint">点击验证码图片刷新</p>

        <button type="submit">Register</button>
    </form>
    <div class="login-link">
        <p>已有账号？ <a href="/login">登录</a></p>
    </div>
</div>
</body>
</html>
